<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="5" :lg="7" :md="8" :sm="24">
                <a-form-item label="门店编号">
                  <a-input placeholder="请输入门店编号" v-model="queryParam.terminalCode"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="5" :lg="7" :md="8" :sm="24">
                <a-form-item label="门店名称">
                  <a-input placeholder="请输入名称模糊查询" v-model="queryParam.terminalName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="5" :lg="7" :md="8" :sm="24">
                <a-form-item label="经销商名称">
                  <a-input placeholder="请输入经销商模糊查询" v-model="queryParam.custName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="5" :lg="7" :md="8" :sm="24">
                <a-form-item label="经销商编号">
                  <a-input placeholder="请输入经销商编号" v-model="queryParam.custCode"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
              </a-col>

            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAdd" type="primary">新增</a-button>
          <!--<a-button type="primary" icon="start" @click="startorstop('009')">启用</a-button>-->
          <!--<a-button type="primary"  @click="startorstop('003')">停用</a-button>-->
          <!--<a-button tabindex="primary" icon="delete" @click="batchDel">删除</a-button>-->
        </div>

        <!-- table区域-begin -->
        <div>
<!--          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
<!--              selectedRowKeys.length-->
<!--            }}</a>项-->
<!--            <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--          </div>-->

          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :customRow="onClickRow"
            class="j-table-force-nowrap"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">调整</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
               <a-menu-item>
                <a @click="handleOpen(record)">费用明细记录</a>
              </a-menu-item>
              <!--<a-menu-item>-->
              <!--<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
              <!--<a>删除</a>-->
              <!--</a-popconfirm>-->
              <!--</a-menu-item>-->
            </a-menu>
          </a-dropdown>
        </span>

          </a-table>
        </div>
        <!-- table区域-end -->

        <!-- 表单区域 -->
        <terminal-pool-modal ref="modalForm" @ok="modalFormOk"></terminal-pool-modal>
      </a-card>
    </a-col>
    <a-drawer
      closable
      title="费用明细"
      width="50%"
      :visible="rightcolval"
      switchFullscreen
      @close="handleCancel"
      cancelText="关闭"
      style="height: 100%;overflow: auto;padding-bottom: 53px;">
      <a-col :md="rightColMd" :sm="24">
        <a-card :bordered="false">
          当前费用余额： {{ this.amount }}
          <a-table
            style="height:500px"
            ref="table2"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns2"
            :dataSource="dataSource2"
            :pagination="ipagination2"
            :loading="loading2"
            @change="handleTableChange2">
          </a-table>
        </a-card>
      </a-col>
    </a-drawer>
  </a-row>
</template>

<script>
import '@/assets/less/TableExpand.less'
import terminalPoolModal from './modules/terminalPoolModal'
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, postAction } from '@/api/manage'
import ARow from 'ant-design-vue/es/grid/Row'
import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
import { filterObj } from '@/utils/util'

export default {
  name: 'TerminalPoolList',
  mixins: [PageListMixin],
  components: {
    ARangePicker,
    ARow,
    terminalPoolModal
  },
  data() {
    return {
      description: '门店费用池',
      model1: {},
      model2: {},
      currentRoleId: '',
      custCode: '',
      amount: '',
      queryParam1: {},
      queryParam2: {},
      dataSource1: [],
      dataSource2: [],
      ipagination1: {
        current: 1,
        size: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      ipagination2: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter1: {
        column: 'createTime',
        order: 'desc'
      },
      isorter2: {
        column: 'createTime',
        order: 'desc'
      },
      filters1: {},
      filters2: {},
      loading1: false,
      loading2: false,
      selectedRowKeys1: [],
      selectedRowKeys2: [],
      selectionRows1: [],
      selectionRows2: [],
      test: {},
      rightcolval: false,
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '费用余额',
          align: 'center',
          dataIndex: 'amount'
        },
        {
          title: '门店编号',
          align: 'center',
          dataIndex: 'terminalCode'
        },

        {
          title: '门店名称',
          align: 'center',
          dataIndex: 'terminalName'
        },
        {
          title: '经销商编号',
          align: 'center',
          dataIndex: 'custCode'
        },
        {
          title: '经销商名称',
          align: 'center',
          dataIndex: 'custName'
        },
        {
          title: '更新人',
          align: 'center',
          dataIndex: 'updateName'
        },
        {
          title: '更新时间',
          align: 'center',
          dataIndex: 'updateDate'
        }
      ],
      columns2: [
        {
          title: '类型',
          align: 'center',
          dataIndex: 'dataType_dictText'

        },
        {
          title: '操作人',
          align: 'center',
          dataIndex: 'createName'
        },
        {
          title: '发生时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '调整值',
          align: 'center',
          dataIndex: 'currentAmount'
        },
        {
          title: '费用',
          align: 'center',
          dataIndex: 'amount'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remarks'
        }
      ],
      // 高级查询参数
      superQueryParams2: '',
      // 高级查询拼接条件
      superQueryMatchType2: 'and',
      url: {
        list: window._CONFIG['domianURL'] + '/terminal/cnTerminalPool/findPageList',
        list2: window._CONFIG['domianURL'] + '/terminal/cnTerminalPoolHistory/findPageList'
      },
      leftColMd: '',
      rightColMd: ''
    }
  },
  comments: {
    leftColMd() {
      return this.selectedRowKeys1.length === 0 ? 24 : 12
    },
    rightColMd() {
      return this.selectedRowKeys1.length === 0 ? 0 : 12
    }
  },
  methods: {
    handleOpen(record) {
      this.rightcolval = true
      this.selectedRowKeys1 = [record.id]
      this.model1 = Object.assign({}, record)
      this.currentRoleId = record.terminalCode
      this.custCode = record.custCode
      this.amount = record.amount
      this.onClearSelected2()
      this.loadData2()
    },
    onSelectChange2(selectedRowKeys, selectionRows) {
      this.selectedRowKeys2 = selectedRowKeys
      this.selectionRows2 = selectionRows
    },
    onClearSelected2() {
      this.selectedRowKeys2 = []
      this.selectionRows2 = []
    },
    onClearSelected1() {
      this.selectedRowKeys1 = []
      this.selectionRows1 = []
    },
    onSelectChange1(selectedRowKeys, selectionRows) {
      this.rightcolval = true
      this.selectedRowKeys1 = selectedRowKeys
      this.selectionRows1 = selectionRows
      this.model1 = Object.assign({}, selectionRows[0])
      console.log(this.model1)
      this.currentRoleId = selectedRowKeys[0]
      this.loadData2()
    },
    onClearSelected() {
    },
    getQueryParams2() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams2) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams2)
        sqp['superQueryMatchType'] = this.superQueryMatchType2
      }
      var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2)
      param.field = this.getQueryField2()
      param.current = this.ipagination2.current
      param.size = this.ipagination2.pageSize
      return filterObj(param)
    },
    getQueryField2() {
      //TODO 字段权限控制
      var str = 'id,'
      this.columns2.forEach(function(value) {
        str += ',' + value.dataIndex
      })
      return str
    },
    loadData2(arg) {
      if (!this.url.list2) {
        this.$message.error('请设置url.list2属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination2.current = 1
      }
      if (this.currentRoleId === '') return
      let params = this.getQueryParams2()//查询条件
      params.terminalCode = this.currentRoleId
      params.custCode = this.custCode
      this.loading2 = true
      var that = this
      postAction(this.url.list2, params).then((res) => {
        if (res.success) {
          that.dataSource2 = res.result.records
          that.ipagination2.total = res.result.total

        }
        that.loading2 = false
      })
    },
    handleTableChange2(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter2.column = sorter.field
        this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination2 = pagination
      this.loadData2()
    },
    handleCancel() {
      this.rightcolval = false
    },
    hideUserList() {
      //this.rightcolval = 0
      this.selectedRowKeys1 = []
    }
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>
